<template>
    <div style="height: 100%;padding: 20px">
        <div class="account">
            <div class="title">账户信息</div>
            <div class="info">
                <div class="item">
                    <div class="label">昵称：</div>
                    <div class="name">
                        <el-input v-if="edit.name" @blur="edit.name=false" style="width: 300px"
                                  v-model="nickName"></el-input>
                        <div v-else>{{nickName}}
                            <!--<i class="el-icon-edit edit" @click="edit.name=true"></i>-->
                        </div>
                    </div>
                </div>
                <div class="item">
                    <div class="label">邮箱：</div>
                    <div class="name">
                        <el-input v-if="edit.account" @blur="edit.account=blur" v-else style="width: 300px"
                                  v-model="account"></el-input>
                        <div v-else>{{account}}
                            <!--<i @click="edit.account=true" class="el-icon-edit edit"></i>-->
                        </div>
                    </div>
                </div>
                <div class="item">
                    <div class="label">密码：</div>
                    <div class="name">
                        <span>******&nbsp;&nbsp;&nbsp;&nbsp;</span>
                        <span @click="modal=true" style="color: #D81E06;cursor: pointer">修改密码</span>
                    </div>
                </div>
                <div class="item">
                    <div class="label">会员等级：</div>
                    <div class="name">
                        <div class="vip-icon vipbox" :class="info.icon">
                            <span class="date">{{info.endDate&&info.level>1?dateFormatDD(info.endDate)+' 到期':''}}</span>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <div class="label">发布次数：</div>
                    <div class="name">
                        <div class="data">
                            <div>
                                <div class="number">{{info.orginSpurplusTimes||0}}</div>
                                <div>总次数</div>
                            </div>
                            <div>
                                <div class="number">{{info.orginSpurplusTimes - info.spurplusTimes}}</div>
                                <div>已用次数</div>
                            </div>
                            <div>
                                <div class="number">{{info.spurplusTimes||0}}</div>
                                <div>剩余次数</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <div class="label">存储空间：</div>
                    <div class="name">
                        <div class="data">
                            <div class="box">
                                <div class="number">{{info.orginSpurplusTimes||0}}</div>
                                <div>总空间</div>
                            </div>
                            <div>
                                <div>{{0}}</div>
                                <div>已用空间</div>
                            </div>
                            <div>
                                <div>{{info.spurplusTimes||0}}</div>
                                <div>剩余空间</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div style="text-align: center;margin: 30px 0 20px">
                    <!--<el-button style="width: 100px" type="info" @click="">取消</el-button>-->
                    <!--<el-button style="width: 100px" type="primary" @click="">确认</el-button>-->
                </div>
            </div>
        </div>
        <el-dialog top="200px" width="450px" custom-class="definedModal" :visible="modal" @close="closeModal"
                   title="修改密码">
            <div class="item">
                <div class="label">原始密码：</div>
                <div class="name">
                    <el-input type="password" style="width: 200px"
                              v-model="pass.orgin"></el-input>
                </div>
            </div>
            <div class="item">
                <div class="label">新密码：</div>
                <div class="name">
                    <el-input type="password" style="width: 200px"
                              v-model="pass.newpass"></el-input>
                </div>
            </div>
            <div class="item">
                <div class="label">确认密码：</div>
                <div class="name">
                    <el-input type="password" style="width: 200px"
                              v-model="pass.repass" show-password></el-input>
                </div>
            </div>
            <div style="text-align: center">
                <el-button style="border-radius: 20px;width: 100px" @click="savePass" type="primary">确认</el-button>
            </div>
        </el-dialog>
    </div>


</template>

<script>
    import moment from 'moment';

    export default {
        name: 'accountManage',
        data() {
            return {
                modal: false,
                nickName: '',
                account: '',
                info: {},
                edit: {
                    name: false,
                    account: false,
                },
                pass: {
                    orgin: '',
                    newpass: '',
                    repass: '',
                },
            };
        },
        mounted() {
            let info = sessionStorage.getItem('member');
            if (info && JSON.parse(info)) {
                this.info = JSON.parse(info);
            }
            let user = JSON.parse(sessionStorage.getItem('account'));
            if (user && user.nickName) {
                this.nickName = user.nickName;
                this.account = user.username;
            }
        },
        methods: {
            closeModal() {
                this.modal = false;
                this.pass = {
                    orgin: '',
                    newpass: '',
                    repass: '',
                };
            },
            savePass() {
                let { orgin, newpass, repass } = this.pass;
                if (!orgin || !newpass || !repass) {
                    this.$message.info('请完善密码信息');
                    return false;
                }
                if (newpass.length < 6 || repass.length < 6) {
                    this.$message.info('密码长度不能小于6位');
                    return false;
                }
                if (newpass !== repass) {
                    this.$message.info('新密码和确认密码两次输入不一致，请重新输入');
                    return false;
                }
                let param = {
                    orginPassword: orgin,
                    passwordVarchar: newpass,
                    uname: this.nickName,
                    useridInt: this.info.userId,
                };
                this.$api.post('cj_user/update', param, success => {
                    this.$message.success('修改成功');
                    this.closeModal();
                }, fal => {
                    this.$message.error(fal);
                });
            },
            dateFormatDD(val) {
                return moment(val).format('YYYY-MM-DD');
            },
        },
    }
    ;
</script>

<style scoped lang="scss">
    .account {
        background: #ffffff;
        border-radius: 20px;
        height: 100%;
        padding-bottom: 20px;
        .title {
            border-bottom: 1px solid #efefef;
            padding: 15px 30px;
        }
    }

    .item {
        display: flex;
        margin: 20px 0;
        font-size: 14px;
        .label {
            margin-right: 10px;
            width: 140px;
            text-align: right;
            color: #aaaaaa;
        }
        .name {
            width: calc(100% - 150px);
            i {
                margin-left: 20px;
                cursor: pointer;
            }
            i:hover {
                color: $color-blue;
            }
            .data {
                @include flex;
                & > div {
                    width: 80px;
                    div {
                        text-align: center;
                        color: #cccccc;
                    }
                    div:first-of-type {
                        font-size: 30px;
                        color: #333333;
                    }
                }
            }
            .vipbox {
                width: 235px;
                height: 140px;
                cursor: pointer;
                position: relative;
                .date {
                    position: absolute;
                    font-size: 12px;
                    bottom: 20px;
                    left: 20px;
                }
            }
        }
    }

    //会员等级icon和功能列表icon
    .vip-icon {
        background-repeat: no-repeat;
        background-size: cover;
        background-image: url("../../../assets/imgs/vipImg/level1.png");
        color: #aaaaaa;
        box-shadow: 3px 4px 4px 0 rgba(0, 0, 0, 0.2);
    }

    .vip-2 {
        background-image: url("../../../assets/imgs/vipImg/level2.png");
        color: rgba(72, 83, 108, 0.70);
    }

    .vip-3 {
        background-image: url("../../../assets/imgs/vipImg/level3.png");
        color: rgba(143, 97, 11, 0.70);
    }

    .vip-4 {
        background-image: url("../../../assets/imgs/vipImg/level4.png");
        color: rgba(90, 95, 121, 0.70);
    }

    .vip-5 {
        background-image: url("../../../assets/imgs/vipImg/level5.png");
        color: rgba(64, 119, 176, 0.70);
    }

</style>